{% extends "base.html" %}

{% block title %}{{ _('error.500.title') }} - {{ _('app.name') }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8 text-center">
        <div class="error-container my-5">
            <h1 class="display-1 text-muted">500</h1>
            <i class="bi bi-bug text-danger" style="font-size: 5rem;"></i>
            <h2 class="mt-4">{{ _('error.500.header') }}</h2>
            <p class="lead text-muted">{{ _('error.500.message') }}</p>
            
            {% if error_details %}
            <div class="alert alert-danger mt-4">
                <h5>{{ _('error.500.details_header') }}</h5>
                <pre class="text-start p-3 bg-light"><code>{{ error_details }}</code></pre>
            </div>
            {% endif %}
            
            <div class="mt-5">
                <a href="{{ url_for('index') }}" class="btn btn-primary">
                    <i class="bi bi-house-door"></i> {{ _('error.back_home') }}
                </a>
                <button class="btn btn-outline-secondary ms-2" onclick="window.location.reload()">
                    <i class="bi bi-arrow-clockwise"></i> {{ _('error.refresh') }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}